<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>Vue-echarts</title>
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <script include="vue,echarts" exclude="plugin" src="./static/libs/include-mapboxgl-local.js"></script>
    <style type="text/css">
        body {
            margin: 0px !important;
        }

        #app {
            margin: 0 0;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }

        .map {
            position: absolute; /* 只能是绝对布局 */
            top: 0;
            bottom: 0;
            height: 100%;
            width: 100%;
        }
    </style>
</head>

<body>
<div id="app">
    <mapgis-web-map
            id="map"
            :map-style="mapStyle"
            :zoom="mapZoom"
            :center="outerCenter"
            :crs="mapCrs"
            v-on:load="handleMapLoad">
        <mapgis-echarts-layer :options="option">
        </mapgis-echarts-layer>
    </mapgis-web-map>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                mapStyle: {
                    //设置版本号，一定要设置
                    version: 8,
                    //添加来源
                    sources: {},
                    //设置加载并显示来源的图层信息
                    layers: []
                }, // 地图样式
                mapZoom: 10, // 地图初始化级数
                outerCenter: [116.46, 39.92], // 地图显示中心
                mapCrs: 'EPSG:3857',
                busLines: {},
                option: {}
            };

        },
        mounted() {
            this.initData();
        },
        methods: {
            handleMapLoad(payload) {
                this.map = payload.map;
                this.initData();
            },
            initData() {
                var vm = this;
                $.get('https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/lines-bus.json', function (res) {
                    var hStep = 300 / (res.length - 1);
                    vm.busLines = [].concat.apply([], res.map(function (busLine, idx) {
                        var prevPt;
                        var points = [];
                        for (var i = 0; i < busLine.length; i += 2) {
                            var pt = [busLine[i], busLine[i + 1]];
                            if (i > 0) {
                                pt = [
                                    prevPt[0] + pt[0],
                                    prevPt[1] + pt[1]
                                ];
                            }
                            prevPt = pt;

                            points.push([pt[0] / 1e4, pt[1] / 1e4]);
                        }
                        return {
                            coords: points,
                            lineStyle: {
                                normal: {
                                    color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx))
                                }
                            }
                        };
                    }))
                    vm.initOptions(vm.busLines);
                })

            },
            initOptions(busLines) {
                var echartsOptions = {
                    mapboxgl: {
                        roam: true
                    },
                    series: [{
                        type: 'lines',
                        coordinateSystem: 'mapboxgl',
                        polyline: true,
                        data: busLines,
                        silent: true,
                        lineStyle: {
                            // color: '#c23531',
                            // color: 'rgb(200, 35, 45)',
                            opacity: 0.2,
                            width: 1
                        },
                        progressiveThreshold: 500,
                        progressive: 200
                    }, {
                        type: 'lines',
                        coordinateSystem: 'mapboxgl',
                        polyline: true,
                        data: busLines,
                        lineStyle: {
                            width: 0
                        },
                        effect: {
                            constantSpeed: 20,
                            show: true,
                            trailLength: 0.1,
                            symbolSize: 1.5
                        },
                        zlevel: 1
                    }]
                };
                this.option = echartsOptions;
            }
        }
    });
</script>
</body>
</html>
